*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,PingFang SC,Hiragino Sans GB,sans-serif;background:linear-gradient(135deg,#ffe5ec,#fff0f5,#e0f7fa);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{width:100%;max-width:900px}.retro-screen{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px #ff9ec540,0 8px 24px #a8d8ea26}.screen-header{background:linear-gradient(135deg,#ffe5ec,#fff0f5);padding:24px 32px 20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,158,197,.15)}.pixel-dots{display:flex;gap:8px}.pixel-dot{width:12px;height:12px;border-radius:50%;animation:gentle-pulse 3s ease-in-out infinite}.pixel-dot:nth-child(1){background:linear-gradient(135deg,#ff9ec5,#ffb6d9);box-shadow:0 2px 8px #ff9ec566}.pixel-dot:nth-child(2){background:linear-gradient(135deg,#a8d8ea,#c2e9fb);box-shadow:0 2px 8px #a8d8ea66;animation-delay:.5s}.pixel-dot:nth-child(3){background:linear-gradient(135deg,#ffc8dd,#ffd6e8);box-shadow:0 2px 8px #ffc8dd66;animation-delay:1s}@keyframes gentle-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}}.title{flex:1;font-size:22px;font-weight:700;background:linear-gradient(135deg,#ff9ec5,#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}.screen-info{font-size:13px;font-weight:700;color:#ff6b9d;padding:6px 16px;background:#ff9ec526;border-radius:20px;border:1px solid rgba(255,158,197,.3)}.video-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden}.pixel-video{display:block;width:100%;height:100%;cursor:pointer}.play-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff9ec540,#a8d8ea40);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;transition:opacity .4s ease}.play-overlay.hidden{opacity:0;pointer-events:none}.pixel-play-btn{width:88px;height:88px;border:none;background:linear-gradient(135deg,#ffb6d9,#ffc8dd);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px #ff9ec559,0 4px 12px #ffb6d940}.pixel-play-btn:hover{transform:scale(1.1);box-shadow:0 12px 32px #ff9ec573,0 6px 16px #ffb6d959}.pixel-play-btn:active{transform:scale(1.05)}.loading-text{margin-top:24px;font-size:16px;font-weight:600;color:#fff;letter-spacing:1px;text-shadow:0 2px 8px rgba(255,158,197,.5)}.controls{padding:24px 32px 28px;background:#fff}.progress-bar-container{margin-bottom:20px}.progress-bar{width:100%;height:6px;background:linear-gradient(90deg,#ffe5ec,#e0f7fa);border-radius:8px;cursor:pointer;margin-bottom:12px;position:relative;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ff9ec5,#a8d8ea);width:0%;border-radius:8px;position:relative;transition:width .1s ease;box-shadow:0 0 12px #ff9ec566}.time-display{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#ff9ec5;font-variant-numeric:tabular-nums}.separator{color:#a8d8ea;margin:0 4px}.control-buttons{display:flex;align-items:center;justify-content:center;gap:12px}.pixel-btn{width:48px;height:48px;border:none;background:linear-gradient(135deg,#ffe5ec,#fff0f5);border-radius:16px;color:#ff9ec5;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;box-shadow:0 4px 12px #ff9ec526}.pixel-btn:hover{background:linear-gradient(135deg,#ffb6d9,#ffc8dd);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #ff9ec540}.pixel-btn:active{transform:translateY(0)}.pixel-btn.active{background:linear-gradient(135deg,#ff9ec5,#ffb6d9);color:#fff;box-shadow:0 4px 12px #ff9ec54d}.play-pause{width:56px;height:56px;background:linear-gradient(135deg,#ff9ec5,#ffb6d9);color:#fff;border-radius:50%;box-shadow:0 6px 20px #ff9ec559}.play-pause:hover{background:linear-gradient(135deg,#ff6b9d,#ff9ec5);transform:scale(1.08);box-shadow:0 8px 24px #ff9ec573}.volume-control{display:flex;align-items:center;gap:10px;margin-left:auto}.volume-slider-wrapper{display:flex;align-items:center;gap:10px}.volume-slider{width:90px;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,#ffe5ec,#e0f7fa);border-radius:8px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#ff9ec5,#ffb6d9);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #ff9ec566;-webkit-transition:transform .2s ease;transition:transform .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,#ff9ec5,#ffb6d9);border-radius:50%;border:none;cursor:pointer;box-shadow:0 2px 8px #ff9ec566;-moz-transition:transform .2s ease;transition:transform .2s ease}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.volume-label{font-size:12px;font-weight:600;color:#ff9ec5;min-width:38px}@media(max-width:768px){body{padding:0;background:#000;display:block}.container{max-width:100%;padding:0;height:100vh;display:flex;flex-direction:column}.retro-screen{border-radius:0;box-shadow:none;height:100vh;display:flex;flex-direction:column;background:#000}.screen-header{padding:12px 16px;background:linear-gradient(135deg,#ffe5ecf2,#fff0f5f2);flex-shrink:0}.title{font-size:16px}.screen-info{font-size:11px;padding:4px 12px}.video-wrapper{flex:1;width:100vw;height:calc(100vh - 120px);background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.pixel-video{width:100vh;height:100vw;max-width:none;max-height:none;-o-object-fit:cover;object-fit:cover;transform:rotate(90deg) translate(0);transform-origin:center center;position:absolute}.controls{padding:16px 16px 20px;background:#fffffffa;flex-shrink:0}.control-buttons{gap:10px}.pixel-btn{width:44px;height:44px;border-radius:14px}.play-pause{width:52px;height:52px}.volume-slider{width:70px}.volume-label{font-size:11px;min-width:32px}.pixel-dots{gap:6px}.pixel-dot{width:10px;height:10px}.progress-bar-container{margin-bottom:16px}}@media(max-width:480px){.screen-header{padding:16px 16px 12px}.title{font-size:16px}.screen-info{font-size:11px;padding:4px 12px}.controls{padding:16px 16px 20px}.control-buttons{gap:8px}.pixel-btn{width:40px;height:40px;border-radius:12px}.play-pause{width:48px;height:48px}}